<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <button @click="handleClick">走一走</button>
  </div>
</template>

<script>
export default {
  name: 'Sgmn',
  components: {},
  data() {
    return {
      arr: ['帅哥', '美女', '程序员'],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleClick() {
      // !#1 把头部的添加到末尾
      this.arr.push(this.arr[0])
      // !#2 删除掉头部的那个
      this.arr.shift()
    },
  },
}
</script>

<style lang="less" scoped></style>
